﻿@using xraiding.ViewModels
@model xraiding.ViewModels.UserPreferencesViewModel

@{
    ViewBag.Title = "UserPreferences";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Raiding Preferences</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#BattleNetTag").focus();
        $("#add-availability-button").click(function() {
            var indexHidden = $('#time-availability-index').val();
            $.post("@Url.Action("GetNewTimeAvailability", "CharacterManager")", {index: indexHidden},
                function(result) {
                    $("#time-availability-div").append(result);
                    $('#time-availability-index').val(++indexHidden);
                });
        });
        $("#GameplayStyleDescription").keyup(function() {
            var text = $(this).val();
            var textLength = text.length;
            var limit = 250;
            if(textLength > limit) {                
                var new_text = text.substr(0, limit);
                $(this).val(new_text);
            }
        });
    });
</script>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Raiding requirements</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.BattleNetTag)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.BattleNetTag)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.LookingForGroup)
        </div>
        <div class="editor-field">
            @Html.CheckBoxFor(model => model.LookingForGroup)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.LookingForMore)
        </div>
        <div class="editor-field">
            @Html.CheckBoxFor(model => model.LookingForMore)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.SelectedTimeZone)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.SelectedTimeZone, new SelectList(Model.TimeZones, "TimeZoneId", "Description"))            
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.GameplayStyleDescription)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.GameplayStyleDescription, new { cols = "60", rows = "5" })
            @Html.ValidationMessageFor(model => model.GameplayStyleDescription)
        </div>    
        
        <div class="editor-label">
            @Html.LabelFor(model => model.RaidInterest)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.RaidInterest, new { cols = "60", rows = "5" })
            @Html.ValidationMessageFor(model => model.RaidInterest)
        </div>  
        
        <div class="editor-label">
            @Html.LabelFor(model => model.RaidExperience)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.RaidExperience, new { cols = "60", rows = "5" })
            @Html.ValidationMessageFor(model => model.RaidExperience)
        </div>  
            
        <div style="width:500px;margin:10px 0 0 0;">            
            <div id="time-availability-div">                
                @for (int index = 0; index < Model.TimeAvailability.Count; index++)
                {                    
                    <table>
                        <thead>
                            <tr>
                                <td>
                                    @Html.LabelFor(m => m.TimeAvailability[index].SelectedDay)
                                </td>
                                <td>
                                    @Html.LabelFor(m => m.TimeAvailability[index].SelectedStartTime)
                                </td>
                                <td>
                                    @Html.LabelFor(m => m.TimeAvailability[index].SelectedEndTime)
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    @Html.DropDownListFor(m => m.TimeAvailability[index].SelectedDay, new SelectList(Model.Days, "DayId", "Name", Model.TimeAvailability[index].SelectedDay))
                                </td>
                                <td>
                                    @Html.DropDownListFor(m => m.TimeAvailability[index].SelectedStartTime, new SelectList(Model.Hours, "HourId", "Name", Model.TimeAvailability[index].SelectedStartTime))
                                </td>
                                <td>
                                    @Html.DropDownListFor(m => m.TimeAvailability[index].SelectedEndTime, new SelectList(Model.Hours, "HourId", "Name", Model.TimeAvailability[index].SelectedEndTime))
                                </td>
                            </tr>
                        </tbody>
                    </table>                   
                }
            </div>
            <div>
                <a href="#" id="add-availability-button">Add Availability</a>
                <p>Adding availability allows other players to see what days and times you are available to play. You can add a day more than once if you are available at different times on the same day.  You can always come back and edit your availability.</p>
            </div>
            <input type="hidden" id="time-availability-index" value="@Model.TimeAvailability.Count"/>
        </div>
        <div style="float:left">
            <input type="submit" value="Save" />            
        </div>
        <div style="float:right">
            @Html.ActionLink("Back to home", "Index", "CharacterManager", new{style="text-align:right;"})
        </div>
    </fieldset>
}
